<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      *,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .g-svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid red;
      }

      .g-wrap {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 400px;
        margin: auto;
        outline: 1px solid #000;
      }

      .ball1 {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        offset-path: path(
          "m33.5,161.75731l127.19558,0l39.30441,-123.75731l39.30444,123.75731l127.19556,0l-102.9032,76.48535l39.30645,123.75731l-102.90324,-76.48743l-102.90322,76.48743l39.30646,-123.75731l-102.90323,-76.48535z"
        );
        background-color: red;
        animation: move 3000ms linear infinite;
      }

      .ball2 {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        offset-path: path(
          "m159.49999,192.44588l30.93947,0l9.56053,-24.44589l9.56054,24.44589l30.93946,0l-25.03051,15.10822l9.56103,24.44589l-25.03052,-15.10863l-25.03051,15.10863l9.56103,-24.44589l-25.03052,-15.10822z"
        );
        background-color: green;
        animation: move 3000ms linear infinite;
      }

      @keyframes move {
        0% {
          offset-distance: 0%;
        }
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <svg class="g-svg" width="400" height="400" xmlns="http://www.w3.org/2000/svg">

      <g>
       <title>Layer 1</title>
       <path stroke="#000" id="svg_3" d="m33.5,161.75731l127.19558,0l39.30441,-123.75731l39.30444,123.75731l127.19556,0l-102.9032,76.48535l39.30645,123.75731l-102.90324,-76.48743l-102.90322,76.48743l39.30646,-123.75731l-102.90323,-76.48535z" fill="#fff"/>
       <path id="svg_6" d="m159.49999,192.44588l30.93947,0l9.56053,-24.44589l9.56054,24.44589l30.93946,0l-25.03051,15.10822l9.56103,24.44589l-25.03052,-15.10863l-25.03051,15.10863l9.56103,-24.44589l-25.03052,-15.10822z" stroke="#000" fill="#fff"/>
       <path id="svg_7" d="m215.39001,222.01688l2.29181,0l0.70819,-4.20164l0.70819,4.20164l2.29181,0l-1.85411,2.59673l0.70822,4.20164l-1.85411,-2.5968l-1.85411,2.5968l0.70822,-4.20164l-1.85411,-2.59673z" stroke="#000" fill="#fff"/>
      </g>
     </svg>

    <div class="g-wrap">
      <div class="ball1"></div>
      <div class="ball2"></div>
    </div>
  </body>
</html>
